import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

import { Table } from 'antd';

import * as mock from './mock';
import { toJS } from 'mobx';

const filters = {
  lifecycle(str) {
    let res = '未知状态';
    switch (str) {
      case 'CPLM_OBJ_LIFECYCLE_PRELIMINARY':
        res = '初始'
        break;
      case 'CPLM_OBJ_LIFECYCLE_RELEASE':
        res = '发行'
        break;
      default:
        break;
    }
    return res;
  },
  brand(str) {
    return mock.brandListObj[str];
  }
}

@inject('table')
@observer
class TableTest extends Component {

  componentDidMount() {
    this.props.table.getTemplateList()
  }

  getColumns() {
    return [
      {
        title: '编号',
        dataIndex: 'serialNumber',
        fixed: 'left',
        width: 150,
      },
      {
        title: '状态',
        dataIndex: 'lifecycle',
        width: 70,
        fixed: 'left',
        render: text => {
          let str = filters.lifecycle(text);
          return <span style={{color: str === '初始' ? 'red' : 'inherit'}}>{str}</span>
        }
      },
      {
        title: '对象类型',
        dataIndex: 'objType',
        width: 150,
      },
      {
        title: '产成品代码',
        dataIndex: 'prodNumber',
        width: 160,
        render: text => (<a href={`?prodNumber=${text}`} target="_blank" rel="noopener noreferrer">{text}</a>)
      },
      {
        title: '产品型号',
        dataIndex: 'nofund',
        width: 90,
      },
      {
        title: '品牌',
        dataIndex: 'brand',
        width: 150,
        render: text => (<span>{text[0] ? filters.brand(text[0]).name : ''}</span>)
      },
      {
        title: '区域',
        dataIndex: 'canSalesArea',
        width: 90,
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        width: 150,
      },
      {
        title: '销售型号',
        dataIndex: 'machineSaleModel',
        width: 150,
      },
      {
        title: '贴纸名称',
        dataIndex: 'stickerName',
      },
      {
        title: '图纸对象',
        dataIndex: 'drawObj',
        width: 150,
      },
      {
        title: '图纸编码',
        dataIndex: 'drawNumber',
        width: 150,
      },
      {
        title: '图纸版本',
        dataIndex: 'drawVersion',
        width: 80,
      },
      {
        title: '最新版本',
        dataIndex: 'newDrawVersion',
        width: 80,
      },
      {
        title: '创建时间',
        dataIndex: 'crtTime',
        key: 'crtTime',
        render: dateStamp => <span>{new Date(dateStamp).toLocaleDateString()}</span>
      },
      {
        title: '创建人',
        dataIndex: 'crtName',
      },
    ]
  }

  render() {
    const dataSource = toJS(this.props.table.templateList);
    // const dataSource = {...this.props.table.templateList};

    let { page, pageSize, total, loading } = this.props.table;

    const columns = this.getColumns();

    const pagination = {
      position: ["topRight"],
      current: page,
      pageSize,
      total,
      size: 'default',
      showTotal: total => `共 ${total} 条，每页 ${pageSize} 条`,
      onChange: (page, pageSize) => {
        this.props.table.changePagination(page, pageSize);
      },
      // onShowSizeChange: (current, size) => {
      //   this.props.table.changePagination(1, size);
      // }
    }

    return (
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={pagination}
        showSizeChanger={true}
        scroll={{x: 2000, y: 600}}
        size="small"
        tableLayout="auto"
        rowKey="id"
        loading={loading}
      >
      </Table>
    )
  }
}

export default TableTest;